<ControlGroup width="{width}" valign="{valign}" label="{label}">
    <div class="{inline?'inline':''}">
        {#each options as opt}
        <label title="{opt.tooltip||''}" class="{disabled? 'disabled' :''} {opt.help?'has-help':''}">
            <input type="radio" value="{ opt.value }" bind:group="value" disabled="{disabled}" /><span class="css-ui"></span>&nbsp;<span
                >{ opt.label }</span
            >
            {#if opt.help}
            <div class="help">
                {@html opt.help}
            </div>
            {/if}
        </label>
        {/each}
    </div>
</ControlGroup>

<style lang="less">
    label {
        &.disabled {
            color: #999;
            input {
                opacity: 0.5;
            }
        }
        padding-top: 0 !important;
        padding-right: 1ex;
        position: relative;
        vertical-align: text-top;

        &.has-help > span {
            border-bottom: 1px dotted #9cbfd199;
        }

        &.has-help:hover > span {
            border-bottom: 2px solid #9cbfd1;
        }
        .help {
            font-weight: 400;
            position: absolute;
            top: 24px;
            padding: 8px 10px 8px 10px;
            background: #9cbfd1;
            color: #f9f9f9;
            width: 180px;
            border-radius: 4px;
            box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1);
            z-index: 8000;
            opacity: 0;
            transition: 0s opacity;
            pointer-events: none;
        }

        &:hover .help {
            opacity: 1;
            transition-delay: 0.4s;
            transition-duration: 0.3s;
            pointer-events: all;
        }
    }

    input[type='radio'] {
        float: none;
        opacity: 0 !important;
        pointer-events: none;
        position: absolute;
        left: -10000px;
        display: inline-block;
        vertical-align: sub;
    }
    input[type='radio'] + span.css-ui {
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        border: 1px solid #bbb;
        vertical-align: baseline;
        box-sizing: border-box;
        position: relative;
        margin-right: 0.15rem;
        top: 2px;
    }
    input[type='radio']:checked + span.css-ui {
        background: white;
        border-color: #18a1cd;
        border-width: 4px;
    }
    input[type='radio']:focus + span.css-ui {
        border-color: #18a1cd;
        box-shadow: 0 0 1px 1px fade(#18a1cd, 55%);
    }
    input[type='radio']:disabled + span.css-ui {
        background: #ddd;
        border-color: #bbb;
        cursor: default;
        opacity: 0.6;
    }
    input[type='radio']:disabled:checked + span.css-ui {
        border-color: #bbb;
        background: #bbb;
    }
    .inline {
        label {
            display: inline-block;
            margin-right: 1em;
        }

        .control-label {
            margin-right: 5px;
        }

        .controls label {
            margin-top: -2px;
        }
    }
</style>

<script>
    import ControlGroup from './ControlGroup.html';

    export default {
        components: { ControlGroup },
        data() {
            return {
                disabled: false,
                width: 'auto',
                valign: 'top',
                inline: true
            };
        }
    };
</script>
